前端analysis | What,Why,Who,When,Where,How

《Node》- package.json中的browserslist

2020-12-04

介绍

1
2
3
4
5
6
7
# package.json

 "browserslist": [
   "defaults",
   "not IE 11",
   "maintained node versions"
 ]

前端工具直接都支持的浏览器和node版本配置,原文如下：

本地查看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5

概念解释

dead

连续24个月不更新或者不在支持。譬如 IE 10, IE_Mob 11, BlackBerry 10, BlackBerry 7, Samsung 4 and OperaMobile 12.1

defaults

>0.5%, last 2 versions, Firefox ESR, not dead

最佳配置

最省事

1
2
3
"browserslist": [
   "defaults"
 ]

指定版本

1
2
3
4
"browserslist": [
  "> 0.5%, last 2 versions, Firefox ESR, not dead"
 ]

指定浏览器

1
last 2 Chrome versions

作用

不同大小前端资源文件加载。支持ES6语法的不用加载polyfills。支持ES5,加载type=module，不支持的加载nomodule。

1
2
3
4
5
6
7
8
9
10
<script src="runtime-es2015.js" type="module"></script>
  <script src="runtime-es5.js" nomodule></script>
  <script src="polyfills-es2015.js" type="module"></script>
  <script src="polyfills-es5.js" nomodule></script>
  <script src="styles-es2015.js" type="module"></script>
  <script src="styles-es5.js" nomodule></script>
  <script src="vendor-es2015.js" type="module"></script>
  <script src="vendor-es5.js" nomodule></script>
  <script src="main-es2015.js" type="module"></script>
  <script src="main-es5.js" nomodule></script>

如何实现

还需要介个tsconfig.json文件中target

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

BROWSERSLIST ES TARGET BUILD RESULT
ES5 support disabled es2015 Single build, ES5 not required
ES5 support enabled es5 Single build w/conditional polyfills for ES5 only
ES5 support enabled es2015 Differential loading (two builds w/conditional polyfills)

参考

browserslist
differential-loading

本文作者：前端analysis
联系邮箱：cheonghu@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
Tags: node
← 《Angular8》- angular web-worker 实践 《前端面试》- js 加减乘除总有NaN,Infinity出现 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏